extends ../_layout

block active
  - sidebar_active = 'calendar.html'

block content
  h3 Full Calendar
    small Drag and Drop events and tasks

  // START row
  .calendar-app
    .row
      .col-lg-3.col-md-4
        .row
          .col-md-12.col-sm-6.col-xs-12.co-xs-pull-12
            // START panel
            .panel.panel-default
              .panel-heading
                h4.panel-title Draggable Events
              // Default external events list
              .external-events-trash
                .panel-body
                  .external-events
                    .bg-green Lunch
                    .bg-danger Go home
                    .bg-info Do homework
                    .bg-warning Work on UI design
                    .bg-inverse Sleep tight
                  p
                    span.checkbox.c-checkbox
                      label
                        input#remove-after-drop(type='checkbox')
                        span.fa.fa-check 
                        | Remove after Drop
            // END panel
          .col-md-12.col-sm-6.col-xs-12.co-xs-push-12
            // START panel
            .panel.panel-default
              .panel-heading
                h3.panel-title Create Event
              .panel-body
                .input-group.mb
                  input.form-control.external-event-name(type='text', placeholder="Event name...")
                  .input-group-btn
                    button.btn.btn-default.external-event-add-btn(type='button') Add
                p.text-muted: small Choose a Color
                ul.list-inline.external-event-color-selector
                  li.p0: a.circle.circle-danger.circle-xl.selected(href='#')
                  li.p0: a.circle.circle-primary.circle-xl(href='#')
                  li.p0: a.circle.circle-info.circle-xl(href='#')
                  li.p0: a.circle.circle-success.circle-xl(href='#')
                  li.p0: a.circle.circle-warning.circle-xl(href='#')
                  li.p0: a.circle.circle-green.circle-xl(href='#')
                  li.p0: a.circle.circle-pink.circle-xl(href='#')
                  li.p0: a.circle.circle-inverse.circle-xl(href='#')
                  li.p0: a.circle.circle-purple.circle-xl(href='#')
            // END panel
      .col-lg-9.col-md-8
        // START panel
        .panel.panel-default
          .panel-body
            // START calendar
            #calendar
            // END calendar
        // END panel
    // END row

block vendor_css
  // FULLCALENDAR
  link(rel='stylesheet', href='../vendor/fullcalendar/dist/fullcalendar.css')

block vendor_js
  // JQUERY UI
  script(src='../vendor/jquery-ui/ui/core.js')
  script(src='../vendor/jquery-ui/ui/widget.js')
  script(src='../vendor/jquery-ui/ui/mouse.js')
  script(src='../vendor/jquery-ui/ui/draggable.js')
  script(src='../vendor/jquery-ui/ui/droppable.js')
  script(src='../vendor/jquery-ui/ui/sortable.js')
  script(src='../vendor/jqueryui-touch-punch/jquery.ui.touch-punch.min.js')
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // FULLCALENDAR
  script(src='../vendor/fullcalendar/dist/fullcalendar.min.js')
  script(src='../vendor/fullcalendar/dist/gcal.js')